<template>
  <div class="toast" v-show="isShow">{{message}}</div>
</template>

<script>
export default {
  data () {
    this.timer = null;
    return {
      message: '',
      isShow: false,
      
    };
  },

  components: {},

  computed: {},

  methods: {
    show(message, duration = 2000){
      this.message = message
      this.isShow = true

      this.timer = setTimeout(()=>{
        this.message = ''
        this.isShow = false
        this.timer = null;
      },duration)
    },
    loading(duration= 1000){
      this.show('加载中...')
    },
    hide(){
      if(this.timer){
        clearTimeout(this.timer)
        this.message = ''
        this.isShow = false
        this.timer = null
      }
    }
  }
}

</script>
<style scoped>
  .toast{
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: #E1E1E3;
    color: #ffffff;
    transform: translate(-50%,-50%);
    padding: 5px 10px;
    z-index: 999;
  }
</style>